<template>
  <div class="content">
      <el-card>
              <el-form label-width="100px" :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-form-item label="用户名" prop="name" required>
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone" required>
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="设置密码" prop="password" required>
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="repassword" required>
        <el-input v-model="ruleForm.repassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">立即注册</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
      </el-card>

  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
      const validatePassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.repassword !== '') {
            this.$refs.ruleForm.validateField('repassword');
          }
          callback();
        }
      };
      const validateRepassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
        return {
        ruleForm: {
          name: '',
          phone: '',
          password: '',
          repassword:''
        },
         rules: {
        name: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min:3,message: "用户名格式错误", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11,max:11, message: "手机号码格式错误", trigger: "blur" },
        ],
        password: [
            { validator: validatePassword, trigger: 'blur' },
             { min: 6,max:12, message: "密码应为6到12位", trigger: "blur" }
          ],
          repassword: [
            { validator: validateRepassword, trigger: 'blur' }
          ],
      },
    };
    
  },
};
</script>

<style>
.content{
    width: 500px;
}
</style>